<template>
  <view class="profile">
    <view class="bg-gradient"></view>
    <view class="nesting">
      <image src="/static/login/nesting.png" mode="aspectFill" />
    </view>
    <view class="profile-main">
      <up-navbar title="" placeholder bgColor="transparent" :leftIcon="null" />
      <user-profile class="user-profile"></user-profile>
      <up-cell-group class="settings" :border="false">
        <up-cell
          isLink
          :title="$t('profile.system.message')"
          :arrow="false"
          @click="$u.route('pages/system-message/system-message')"
        >
          <template #right-icon>
            <up-badge
              v-if="sotre.msgCount > 0"
              :value="sotre.msgCount"
            ></up-badge>
            <image
              v-else
              class="right-arrow-icon"
              src="/static/common/right-arrow.png"
              mode="aspectFill"
            ></image>
          </template>
        </up-cell>
        <up-cell
          isLink
          :title="$t('profile.feedback')"
          :arrow="false"
          @click="$u.route('pages/feedback/feedback')"
        >
          <template #right-icon>
            <image
              class="right-arrow-icon"
              src="/static/common/right-arrow.png"
              mode="aspectFill"
            ></image>
          </template>
        </up-cell>
        <up-cell
          isLink
          :title="$t('profile.about.application')"
          :arrow="false"
          @click="$u.route('pages/about-application/about-application')"
        >
          <template #right-icon>
            <image
              class="right-arrow-icon"
              src="/static/common/right-arrow.png"
              mode="aspectFill"
            ></image>
          </template>
        </up-cell>
        <up-cell
          isLink
          :border="false"
          :title="$t('profile.system.settings')"
          :arrow="false"
          @click="$u.route('pages/system-settings/system-settings')"
        >
          <template #right-icon>
            <image
              class="right-arrow-icon"
              src="/static/common/right-arrow.png"
              mode="aspectFill"
            ></image>
          </template>
        </up-cell>
      </up-cell-group>
    </view>
    <tabBar></tabBar>
  </view>
</template>

<script setup>
import { onLoad, onPullDownRefresh,onShow } from "@dcloudio/uni-app";
import { useAppStore } from "@/store/app";

const sotre = useAppStore();

onLoad(() => {
  sotre.refreshUserInfo();
  sotre.updateSysMsgCount();
});
onShow(() => {
	sotre.updateSysMsgCount();
});
onPullDownRefresh(async () => {
  await sotre.refreshUserInfo();
  uni.stopPullDownRefresh();
});
</script>

<style lang="scss" scoped>
.profile {
  overflow-x: hidden;
  height: 100vh;
  position: relative;
  @include flex(column);

  .badge-wrap {
    position: relative;
  }

  .bg-gradient {
    width: 100%;
    height: 710rpx;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.26;
    background: linear-gradient(
      180deg,
      #64b7f6 0%,
      rgba(100, 183, 246, 0) 43.719%,
      transparent 100%
    );
  }

  .nesting {
    width: 962rpx;
    height: 1320rpx;
    position: absolute;
    top: -99rpx;
    left: 145rpx;
    /* 让点击事件穿透该元素 */
    pointer-events: none;

    image {
      width: 100%;
      height: 100%;
    }
  }

  &-main {
    flex: 1;
    overflow-y: auto;
    position: relative;
    z-index: 1;
  }

  .user-profile {
    margin: 0 32rpx;
  }

  .settings {
    margin: 6rpx 32rpx 0;
    padding: 8rpx 32rpx 5rpx;
    background-color: #132034;
    border-radius: 16rpx;

    & :deep(.u-cell--clickable) {
      background-color: transparent;

      .u-cell__title-text,
      .right-arrow-icon {
        opacity: 0.75;
      }
    }

    & :deep(.u-cell__body) {
      padding: 39rpx 0 37rpx;
    }

    & :deep(.u-cell__title-text) {
      font-size: 30rpx;
      line-height: 1;
      color: #eeeeee;
    }

    & :deep(.u-line) {
      border-bottom-color: #08121e !important;
    }

    .right-arrow-icon {
      width: 10rpx;
      height: 18rpx;
    }
  }
}
</style>
